<template>
  <div id="app" class="SkAreaOutDoor">
    <class-card :cardTitle="'专业活动室'" :span="span" @className="getClassName" :centerCardTitle="'受欢迎的专业活动室'" >
      <template slot="centerViewBtn">
        <a-button size="small" type="primary" @click="viewDetail('week')">
          <span>查看详情</span>
          <a-icon type="caret-right" />
        </a-button>
      </template>
      <template slot="centerData">
        <pie :width="'100%'" :data="pieData" :height="'240px'"></pie>
      </template>
      <template slot="leftTitle" v-if="classId">
        <p>最喜欢的专业活动室</p>
      </template>
      <template slot="rightViewBtn">
        <a-button size="small" type="primary" @click="viewDetail('month')" style="margin-bottom:10px;">
          <span>查看本月</span>
          <a-icon type="caret-right" />
        </a-button>
      </template>
      <template slot="rightData">
        <line-bar v-show="!barShow" :width="'100%'" :height="'277px'" :seriesName="['时长/分钟','频次']" :barName="barName" :lineData="lineData" :barData="barData" :color="['#A9F387', '#73DDFF']"></line-bar>
        <horizontal-bar v-show="barShow" :barName="barName" :areaList="areaList"   v-on="$listeners" :stack="true" :barData="barData" :width="'100%'" :height="'280px'" ></horizontal-bar>
      </template>
    </class-card>
  </div>
</template>
<script>
import ClassCard from '@/components/skComponent/ClassCard.vue'
import Pie from "@/components/Echarts/Pie.vue";
import HorizontalBar from "@/components/Echarts/HorizontalBar.vue";
import LineBar from "@/components/Echarts/lineBar.vue";
import { getAction } from "@/api/manage.js";
export default {
  name: 'SkAreaOutDoor',
  data() {
    return {
      barName:[],
      barData:[],
      lineData:[],
      areaList:[],
      classId:"",
      barShow:false,
      url:{
        Duration:"/management/skArea/getAreaDuration",
        ClassDuration:"/management/skArea/getAreaClassDuration",
        StudentDuration:"/management/skArea/getAreaStudentDuration"
      },
      pieData:[],
      span:[7,13,0],
    }
  },
  components: {
    ClassCard,
    Pie,
    HorizontalBar,
    LineBar,
  },

  filters: {},

  computed: {},

  created() {
    this.getInDoorData();
    this.getInDoorArea();
  },

  activated() {},

  mounted() {
  },

  methods: {
    // 获取班级信息
    getClassName(data){
      this.classId = data.classId;
      this.$emit("classData",{classId:this.classId,areaType:2})
      this.barData = [];
      this.barName = [];
      this.span = []
      this.span.push(7,13,0)
      if (data.className != "全园") {
        this.barShow = true;
        this.getInDoorStuent();
      }else{
        this.getInDoorArea();
        this.barShow = false;
      }
      this.getInDoorData();
    },
    // 查询学生最喜欢的区域
    async getInDoorStuent(){
      let data = await this.$skArea.getInDoorStuent(this.classId,2);
      this.areaList = data.areaList;
      this.barData = data.bardata;
      this.barName = data.barName;
    },
    // 全园查询受欢迎的区域
    async getInDoorArea(){
      let data = await this.$skArea.getInDoorArea(2);
      this.barData = data.barData;
      this.lineData = data.lineData;
      this.barName = data.barName;
    },
    // 获取欢迎度
    async getInDoorData(){
      let data = await this.$skArea.getInDoorData(this.classId,2);
      let totalDuration = 0
      data.map(item=>{
        totalDuration += item.duration
      })
      this.pieData = data.map(item=>{
        return {
          name:item.areaName,
          // value:item.studentCount,
          // duration:item.duration,
          value:item.duration,
          studentCount:item.studentCount,
          scale: (item.duration / totalDuration * 100).toFixed(2)
        }
      }).sort((a,b)=>{
        return b.value - a.value
      });
    },
    // 查看详情
    viewDetail(dateType){
      let data = {
        show:false,
        title:"专业活动室",
        IntimacyShow:true,
        classId:this.classId,
        dateType:dateType
      }
      
      this.$emit("activityData",data);
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
